<template>
	<el-container style="height: 100%;">

		<el-aside width="200px">
			<el-menu default-active="welcome" unique-opened background-color="#294256" class="el-menu"
				text-color="#BBCBD9">
				<el-menu-item index="welcome" @click="router.push('/welcome')">
					<el-icon>
						<location />
					</el-icon>
					<span >网站首页</span>
				</el-menu-item>

				<el-sub-menu index="system">
					<template #title>
						<el-icon>
							<Discount />
						</el-icon>
						<span>系统管理</span>
					</template>
					<el-menu-item index="user" @click="router.push('/user')">用户管理</el-menu-item>
					<el-menu-item index="character" @click="router.push('/character')">角色管理</el-menu-item>
					<el-menu-item index="menu" @click="router.push('/menu')">菜单管理</el-menu-item>
					<el-menu-item index="company" @click="router.push('/company')">公司管理</el-menu-item>
				</el-sub-menu>

				<el-sub-menu index="course">
					<template #title>
						<el-icon>
							<Document />
						</el-icon>
						<span>课程管理</span>
					</template>
					<el-menu-item index="classify" @click="router.push('/classify')">分类管理</el-menu-item>
					<el-menu-item index="course" @click="router.push('/course')">课程管理</el-menu-item>
					<el-menu-item index="video" @click="router.push('/video')">视频管理</el-menu-item>
					<el-menu-item index="appraise" @click="router.push('/appraise')">评价管理</el-menu-item>
					<el-menu-item index="courseorder" @click="router.push('/courseorder')">订单管理</el-menu-item>
				</el-sub-menu>

				<el-sub-menu index="counselor">
					<template #title>
						<el-icon>
							<ChatDotSquare />
						</el-icon>
						<span>咨询师管理</span>
					</template>
					<el-menu-item index="info" @click="router.push('/info')">咨询师管理</el-menu-item>
					<el-menu-item index="level" @click="router.push('/level')">等级管理</el-menu-item>
					<el-menu-item index="specialism" @click="router.push('/specialism')">擅长领域管理</el-menu-item>
					<el-menu-item index="consultantclassification" @click="router.push('/consultantclassification')">收费分类管理</el-menu-item>
					<el-menu-item index="standard" @click="router.push('/standard')">收费标准管理</el-menu-item>
					<el-menu-item index="message" @click="router.push('/message')">留言管理</el-menu-item>
					<el-menu-item index="evaluate" @click="router.push('/evaluate')">评价管理</el-menu-item>
					<el-menu-item index="order" @click="router.push('/order')">订单管理</el-menu-item>
				</el-sub-menu>

				<el-sub-menu index="contentmanagement">
					<template #title>
						<el-icon>
							<Notebook />
						</el-icon>
						<span>内容管理</span>
					</template>
					<el-menu-item index="classification" @click="router.push('classification')">文章分类管理</el-menu-item>
					<el-menu-item index="articlemanagement"
						@click="router.push('/articlemanagement')">文章管理</el-menu-item>
					<el-menu-item index="fmclassificationmanagement"
						@click="router.push('/fmclassificationmanagement')">FM分类管理</el-menu-item>
					<el-menu-item index="fmmanagement" @click="router.push('/fmmanagement')">FM管理</el-menu-item>
					<el-menu-item index="welfarecenters" @click="router.push('/welfarecenters')">公益中心管理</el-menu-item>
					<el-menu-item index="psyknowledge" @click="router.push('/psyknowledge')">心理知识管理</el-menu-item>
					<el-menu-item index="articlerecycle" @click="router.push('/articlerecycle')">文章回收管理</el-menu-item>
				</el-sub-menu>

				<el-sub-menu index="knowledge">
					<template #title>
						<el-icon>
							<ZoomOut />
						</el-icon>
						<span>心理测评管理</span>
					</template>
					<el-menu-item index="testbank" @click="router.push('/testbank')">心理测评管理</el-menu-item>
					<el-menu-item index="testclassification"
						@click="router.push('/testclassification')">测评分类管理</el-menu-item>
					<el-menu-item index="testtopic" @click="router.push('/testtopic')">测评题库管理</el-menu-item>
					<el-menu-item index="testanswer" @click="router.push('/testanswer')">测评答案管理</el-menu-item>
				</el-sub-menu>

				<el-sub-menu index="7">
					<template #title>
						<el-icon>
							<EditPen />
						</el-icon>
						<span>心理答疑管理</span>
					</template>
					<el-menu-item index="questionmanage" @click="router.push('questionmanage')">问题管理</el-menu-item>
					<el-menu-item index="replymanage" @click="router.push('replymanage')">回复管理</el-menu-item>
				</el-sub-menu>

				<el-menu-item index="consultbooking" @click="router.push('consultbooking')">
					<el-icon>
						<UserFilled />
					</el-icon>
					<span>咨询预约管理</span>
				</el-menu-item>

				<el-menu-item index="inforbulletin" @click="router.push('inforbulletin')">
					<el-icon>
						<Bell />
					</el-icon>
					<span>咨询公告管理</span>
				</el-menu-item>

				<el-menu-item index="integraimanage" @click="router.push('integraimanage')">
					<el-icon>
						<Grid />
					</el-icon>
					<span>积分管理</span>
				</el-menu-item>
			</el-menu>
		</el-aside>

		<el-container>
			<el-header>
				<div class="header-left">
					<el-icon>
						<Operation />
					</el-icon>
				</div>

				<div class="header-right">
					<el-dropdown @command="handleCommand">
						<span class="el-dropdown-link">
							<img src="../assets/java.jpg" alt="头像" />
							欢迎您，{{username}}
							<el-icon class="el-icon--right">
								<arrow-down />
							</el-icon>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item command="a">个人中心</el-dropdown-item>
								<el-dropdown-item command="b">修改资料</el-dropdown-item>
								<el-dropdown-item command="c">退出登录</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div>
			</el-header>

			<el-main>
				<router-view></router-view>
			</el-main>

		</el-container>
	</el-container>

</template>

<script lang="ts" setup>
	import {
		useRouter
	} from 'vue-router';
	import { Location, Discount, Document, ChatDotSquare, Notebook, ZoomOut, EditPen, UserFilled, Bell, Grid, Operation, ArrowDown } from '@element-plus/icons-vue'
	import { getCurrentInstance, ref } from 'vue';
	const router = useRouter();
	const logout = () => {
		sessionStorage.removeItem('loginUser');
		router.replace('/login');
	}
	const username = ref('')
	//接受请求的数据
	const userData = sessionStorage.getItem('loginUser')
	if (userData) {
		username.value = JSON.parse(userData).username
	}

	const handleCommand = (command) => {
		if (command == 'c') {
			logout()
		}
	}
</script>

<style scoped>
	.el-aside {
		width: 240px !important;
		/* 强制固定宽度 */
		transition: none !important;
		/* 禁用动画效果 */
		height: 100vh;
		background-color: #294256;

	}

	.el-header {
		height: 60px;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
	}

	.el-menu {
		border-right: none !important;
		height: 100%;
		/* 改为100%填充 */
		overflow: hidden !important;
		/* 禁用滚动条 */
	}

	.header-left {
		/* 左对齐 */
		float: left;
	}

	.header-left {
		font-size: 26px;
		padding-top: 11px;
		cursor: pointer;
	}

	/* 解决外轮廓问题 */
	.el-dropdown-link {
		cursor: pointer;
		outline: none;
	}

	.header-right {
		float: right;
		line-height: 60px;
	}

	.header-right img {
		height: 50px;
		vertical-align: middle;
		margin-top: 5px;
		border-radius: 26px;
	}

	.el-container {
		height: 100vh !important;
		overflow: hidden;
	}
</style>